@keyframes trans {
  0% {
    left: 48px;
  };
  100% {
    left: calc(100% - 48px - 44px);
  }
}

:root[theme-mode="dark"] {
  .axis-motion-stage:not(.dark) {
    display: none;
  }
  .axis-motion-stage.dark {
    display: block;
  }

  .container-motion:not(.dark) {
    display: none;
  }
  .container-motion.dark {
    display: block;
  }

  .fade-motion:not(.dark) {
    display: none;
  }
  .fade-motion.dark {
    display: block;
  }
}


.doc-motion {
  img {
    margin: 0;
  }

  .axis-motion {
    margin-top: 16px;
  }

  .axis-motion-stage {
    margin-top: 8px;

    &.dark {
      display: none;
    }
  }

  .container-motion {
    margin: 16px 0;

    svg {
      border-radius: 6px;
    }

    &.dark {
      display: none;
    }
  }

  .fade-motion {
    margin: 16px 0;

    &.dark {
      display: none;
    }
  }

  .sport-code {
    font-size: 20px;
    color: var(--text-primary, rgba(0,0,0,.9));
  }

  .motion-table {
    td {
      &:first-child {
        color: rgba(131, 78, 194, 1);
      }
      font-size: 14px;
    }
  }

  .slow-motion {
    .slow-motion-stage {
      display: flex;
      margin: 8px 0;

      .preview {
        border-radius: 6px;
        margin-right: 16px;
        object-fit: cover;
        margin: 0 16px 0 0;
        width: 176px;
        height: 176px;
        flex-shrink: 0;
      }

      .detail {
        border-radius: 6px;
        background: var(--bg-color-demo, #fff);
        display: inline-flex;
        align-items: center;
        flex: 1;
        position: relative;
        border: 1px solid var(--component-border);

        .ball {
          flex-shrink: 0;
          width: 44px;
          height: 44px;
          border: 1px solid #0052d9;
          background: #ecf2fe;
          border-radius: 100%;
          position: absolute;
          left: 48px;
          top: 50%;
          margin-top: -23px;
        }
      }

      &.easing {
        .ball {
          animation: trans 2.4s infinite cubic-bezier(.38,0,.24,1);
        }
      }
      &.ease-out {
        .ball {
          animation: trans 2.4s infinite cubic-bezier(0,0,.15,1);
        }
      }
      &.ease-in {
        .ball {
          animation: trans 2.4s infinite cubic-bezier(0.82,0,1,.9);
        }
      }
      &.linear {
        .ball {
          animation: trans 2.4s infinite linear;
        }
      }
    }
  }

  .table-check {
    thead th {
      font-weight: bold;
    }
    tr {
      position: relative;
    }
    td {
      label {
        cursor: pointer;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

        svg {
          opacity: 0;
          visibility: hidden;
          transition: all .2s linear;
          position: absolute;
          left: 24px;
          top: 50%;
          color: #00a870;
          width: 14px;
          height: 14px;
          transform: translate(0 , -50%);
        }

        input {
          display: none;
          &:checked + svg {
            opacity: 1;
            visibility: visible;
          }
        }
      }

      &.desc {
        color: var(--text-secondary, rgba(0,0,0,.6));
      }
    }
  }

  .download-btn {
    float: right;

    img {
      margin: 0;
    }
  }

  .motion-board {
    border-radius: 3px;
    background: var(--bg-color-container);
    border: 1px solid var(--component-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 16px;
    padding: 56px 24px;

    .tdesign-demo-dropdown__text {
      display: inline-flex;
      align-items: center;
    }
  }
  
}